<!DOCTYPE html>
<html lang=''>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background-color: beige;
        }

        .nav {
            height: 44px;
            width: 100%;
            background-color: white;
            border-bottom: 1px solid gainsboro;
            position: relative;
        }

        .nav h4 {
            width: calc(100% - 140px);
            line-height: 44px;
            margin: 0 auto;
            text-align: center;
        }

        .back {
            position: absolute;
            left: 10px;
            line-height: 44px;
        }

        .login {
            position: absolute;
            right: 10px;
            line-height: 44px;
            top: 0;
        }
    </style>
</head>

<body>
    <!-- 
        在哪个模板中使用数据，该数据就来自于哪个实例

     -->
    <div id='app'>
        <navcom title="首页">
            <!-- 使用插槽的时候可以通过 v-slot: 指令指明将标签插入到哪个插槽中 -->
            <template v-slot:left>
                <span class="back">返回 {{count}}</span>
            </template>

            <!-- # 是 v-slot 的简写 -->
            <template #right>
                <span class="login">登录</span>
            </template>

        </navcom>

    </div>
</body>
<template id="nav">
    <div class="nav">
        <!-- 给插槽添加一个 name 属性，为插槽的名称 -->
        <slot name="left"></slot>
        <h4>{{title}} -- {{count}}</h4>
        <slot name="right"></slot>
    </div>
</template>
<script>

    const app = Vue.createApp({
        data () {
            return {
                count: 1
            }
        },
    })
    app.component('navcom', {
        template: '#nav',
        data () {
            return {
                count: 2
            }
        },
        props: {
            title: {
                default: '导航条',
                type: String
            }
        }
    })
    app.mount('#app')
</script>

</html>